<script>
/**
 * 折线图组件
 * @description 折线图组件
 * @props
 * showTooltip: Boolean, 是否显示tooltip
 * tooltip: Object, tooltip配置
 * title: String, 图表标题
 * legend: Array, 图例
 * grid: Object, 网格配置
 * xAxis: Array, x轴数据
 * yAxis: Object, y轴配置
 * series: Array, 系列数据
 *
 */
import * as echarts from "echarts";
import dingtheme from "../theme/dingTheme.json"
import macarons from "../theme/macarons.json"

export default {
  name: 'line-charts',

  props: {
    showTooltip: {
      type: Boolean,
      default: () => {
        return true
      }
    },

    tooltip: {
      type: Object,
      default: () => {
        return {trigger: 'axis'}
      }
    },

    title: {
      type: String,
      default: () => {
        return ''
      }
    },
    legend: {
      type: Object,
      default: () => {
        return []
      }
    },

    grid: {
      type: Object,
      default: () => {
        return {left: '3%', right: '8%', bottom: '3%', containLabel: true,}
      }
    },

    xAxis: {
      type: Object,
      default: () => {
        return []
      }
    },

    yAxis: {
      type: Object,
      default: () => {
        return {type: 'value'}
      }
    },

    series: {
      type: Array,
      default: () => {
        return []
      }
    },
  },

  data() {
    return {}
  },
  methods: {
    init() {
      echarts.registerTheme('dingtheme', dingtheme.theme)
      echarts.registerTheme('macarons', macarons.theme)
      this.$refs.lineChart.init(echarts, 'dingtheme', (chart) => {
        chart.setOption(this.creatOptions())
        this.$emit('finished')
      })
    },

    creatOptions() {
      let tooltip = {
        show: this.showTooltip,
        ...this.tooltip
      }
      tooltip.confine = true
      let title = {text: this.title}
      let legend = {data: this.legend}
      let grid = this.grid
      let xAxis = {type: 'category', boundaryGap: false, data: this.xAxis,}
      return {
        title,
        tooltip: tooltip,
        legend,
        grid,
        xAxis,
        yAxis: this.yAxis,
        series: this.series,
      }
    },

    refreshOptions() {
      this.$refs.lineChart.setOption(this.creatOptions())
    }

  },
}


</script>

<template>
  <view class="line-chart">
    <l-echart ref="lineChart" @finished="init"/>
  </view>
</template>

<style scoped lang="scss">
.line-chart {
  color: #000000;
}

</style>